<template>
	<view class="arrow-bar">
		<image v-if="left" :src="`/static/icon/${left}.png`" style="width: 40rpx;margin-right: 20rpx;" mode="widthFix"
			alt="" />
		<text class="title">{{ title }}</text>
		<view>
			<span style="color: #b3b3b3;">{{right}}&nbsp;</span>
			<uni-icons class="arrow" type="right" color="#b3b3b3" size="16"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: "arrow-bar",
		props: {
			title: {
				type: String,
				required: true
			},
			left: {
				type: String,
			},
			right: {
				type: String,
			}
		},
	}
</script>

<style lang="scss" scoped>
	.arrow-bar {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: $im-font-size;
		color: $im-text-color;
		margin-top: 1rpx;
		background-color: white;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		box-sizing: border-box;

		.title {
			flex: 1;
		}

		.arrow {
			margin-right: 40rpx;
		}
	}
</style>